<script>
import {uploadFile} from "@/api/aihuman/common/minio";

export default {
  name: "UploadDialog",
  props: {
    tips: {
      type: String
    },
    mineType: {
      type: String
    },
    type: {
      type: String
    },
    keyFolderPath: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      fileLimit: 5,
      resourceUploadRule: {
        video: {
          title: '上传视频',
          msg: '支持大小不超过50MB，编码格式为 H.264 的.mp4 文件',
          extension: ['mp4'],
          // 视频大小
          fileMaxSize: 50 * 1024 * 1024,
          mime: 'video/mp4'
        },
        audio: {
          title: '上传音频',
          msg: '支持100M，mp3格式的文件',
          path: 'material/audio',
          extension: ['mp3'],
          // 大小
          fileMaxSize: 100 * 1024 * 1024,
          mime: 'audio/mpeg'
        },
        // model_3d: {
        //   title: '上传模型',
        //   msg: '支持30M，glb格式的文件',
        //   path: 'material/model',
        //   extension: ['glb'],
        //   fileMaxSize: 30 * 1024 * 1024,
        //   mime: '.glb'
        // },
        image: {
          title: '上传图片',
          msg: '支持5M，jpg、jpeg,png格式的图片',
          extension: ['jpg', 'jpeg', 'png'],
          fileMaxSize: 5 * 1024 * 1024,
          mime: 'image/jpeg,image/png'
        }
      },
    }
  },
  methods: {
    uploadBegin() {
      if (this.fileList.length === 0) {
        this.$message.error('请上传文件')
        return false
      }
      this.fileList.forEach(item => {
        let formData = new FormData()
        formData.append('file', item.file)
        formData.append('keyFolderPath', this.keyFolderPath)

        let uploadProgress = progressEv => {
          item.progressValue = (progressEv.loaded / progressEv.total * 100).toFixed(0)
        }

        uploadFile(formData,
          uploadProgress
        ).then(res => {
          this.$emit('upload-ok', res.data.data)

          this.dialogVisible = false
        })
      })
    },
    openDialog() {
      this.dialogVisible = true
      this.fileList = []
      this.$nextTick(() => {
        this.$refs.uploadRef.clearFiles()
      })
    },
    exceedFile(files) {
      if (files.length > this.fileLimit) {
        this.$message.error('一次最多上传5个文件')
      }
    },
    uploadFileFn(file) {
      console.log(file);
      let fileName = file.file.name
      let index = fileName.lastIndexOf('.')
      let newFileName = fileName.substring(0, index)
      let extensions = fileName.substring(index + 1)
      let mineType = file.file.type

      if (mineType === '' || !this.mineType.includes(mineType)) {
        this.$message.error(`${this.tips}`)
        return false
      }

      if (this.resourceUploadRule[this.type].fileMaxSize < file.file.size) {
        this.$message.error(this.resourceUploadRule[this.type].msg)
        return false
      }

      this.fileList.push({
        name: newFileName,
        file: file.file,
        url: URL.createObjectURL(file.file),
        progressValue: 0
      })
    }
  }
}
</script>

<template>
  <el-dialog
    title="上传资源"
    :visible.sync="dialogVisible"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
  >

    <template #title>
      <div class="dialog-header">
        <div class="el-dialog__title">上传资源</div>
        <span class="dialog-tips">{{ tips }}</span>
      </div>
    </template>
    <div class="upload-flex">
      <el-upload
        ref="uploadRef"
        class="upload-box"
        drag
        action=""
        :http-request="uploadFileFn"
        :show-file-list="false"
        :limit="fileLimit"
        :on-exceed="exceedFile"
        :accept="mineType"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

      <template v-if="fileList.length > 0">
        <div class="list-item" v-for="(item, index) in fileList" :key="index">
          <img v-if="type === 'image'" :src="item.url" alt="">
          <video v-if="type === 'video'" :src="item.url" controls></video>
          <img v-if="type === 'audio'" src="@/assets/aihuman/mp3.png" >
          <div class="progress-box">
            <el-progress
              type="circle"
              :percentage="item.progressValue"
              width="80"
              :status="item.progressValue  === 100 ? 'success': ''"
            ></el-progress>
          </div>
        </div>
      </template>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <el-button type="primary" @click="uploadBegin">开始上传</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.progress-box {
  background: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  height: 150px;
  width: 200px;
  position: relative;
  //margin-right: 15px;

  img, video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.upload-flex {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.upload-box {
  height: 150px;
  width: 200px;
  //margin-right: 15px;

  /deep/ .el-upload-dragger {
    background: #dedede;
    height: 150px;
    width: 200px;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
}

.dialog-tips {
  color: #c6c6c6;
  font-size: 12px;
  margin-left: 10px;
}
</style>
